<template>
    <!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="content" :style="'background-image: url(/static/images/reg_bg.png);'">
        <view class="warp">
           <!-- <c-gap height="100rpx" /> -->
		   <view style="height: 100rpx;"></view>
            <view class="nav-bar banxin">
            <!--    <view><uni-icons type="back" size="24" color="#fff" @tap="$c.jump(1, 5)"></uni-icons></view> -->
                <view class="title">选择生日</view>
            </view>
            <!-- <c-gap height="102rpx" /> -->
			 <view style="height: 102rpx;"></view>
            <view class="sex-title">您的生日是？</view>
			
           <!-- <c-gap height="80rpx" /> -->
		    <view style="height: 80rpx;"></view>
            <view>
                <view>
                    <picker-view
                        :indicator-style="indicatorStyle"
                        :value="value"
                        @change="bindChange"
                        class="picker-view"
                        mask-style="background:transparent;"
                        indicator-class="selectClass"
                    >
                        <picker-view-column>
                            <view class="item" :class="{ select: item == year }" v-for="(item, index) in years" :key="index">{{ item }}年</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" :class="{ select: item == month }" v-for="(item, index) in months" :key="index">{{ item }}月</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" :class="{ select: item == day }" v-for="(item, index) in days" :key="index">{{ item }}日</view>
                        </picker-view-column>
                    </picker-view>
                </view>
                <!-- <c-gap height="102rpx" /> -->
				 <view style="height: 102rpx;"></view>
                 <view class="register-btn1" @tap="next">继续</view>
            </view>
        </view>
    </view>
</template>

<script>
		//import CGap from '@/components/c-gap.vue';
export default {
	
    data() {
        const date = new Date();
        const years = [];
        const year = date.getFullYear();
        const months = [];
        const month = date.getMonth() + 1;
        const days = [];
        const day = date.getDate();
        for (let i = 1900; i <= date.getFullYear() - 18; i++) {
            years.push(i);
        }
        for (let i = 1; i <= 12; i++) {
            months.push(i);
        }
        for (let i = 1; i <= 31; i++) {
            days.push(i);
        }
        return {
            $c: this.$c,
            title: 'picker-view',
            years,
            year,
            months,
            month,
            days,
            day,
            value: [years.length - 1, month - 1, day - 1],
            indicatorStyle: `height: 50px`,
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
            data: {
                device: '478ca4671a993355',
                sex: '1',
                nickname: '',
                birthday: '',
                height: '',
                weight: '',
                career: '',
                income: '',
                save_city: '',
                avatar: '',
                phone: '',
                code: '',
                password: '',
                phone_model: 'RMX3366'
            }
        };
    },
    onLoad() {
        this.data = uni.getStorageSync('registerInfo');
		
		console.log(JSON.stringify(this.data)+'****************');
		
        this.$nextTick(() => {
            let e = { detail: { value: this.value } };
            this.bindChange(e);
        });
    },
    methods: {
       async next() {	
			let res = await this.$c.post('/app/login/completeMaterial?nicheng=' + this.data.nickname+'&sex='+this.data.sex
			+'&shengri='+this.data.birthday);
			
            uni.setStorageSync('registerInfo', this.data);
            this.$c.jump('/pages/m-pages/m-login/register3');
        },
        bindChange: function (e) {
            const val = e.detail.value;

            this.year = this.years[val[0]];
            this.month = this.months[val[1]];
            this.day = this.days[val[2]];
            this.data.birthday = this.years[val[0]] + '-' + this.months[val[1]] + '-' + this.days[val[2]];
            console.log(this.data.birthday);
        }
    }
};
</script>

<style lang="scss">
.content {
    width: 750rpx;
    height: 100vh;
    background-size: 750rpx 100vh;
    //background-repeat: no-repeat;
    background-position: 0 0;
    .warp {
        width: 702rpx;
        margin: 0 auto;

        .nav-bar {
            display: flex;
            font-weight: 550;
            font-size: 34rpx;
            color: #fff;
            .title {
                width: 680rpx;
                text-align: center;
				color: #000;
            }
        }
        .sex-title {
            font-weight: 600;
            font-size: 48rpx;
            color: #fff;
            line-height: 62rpx;
        }

        .register-btn1 {
            margin: 0 auto;
            text-align: center;
            line-height: 120rpx;
            color: #a14617;
            width: 552rpx;
            height: 120rpx;
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            border-radius: 60rpx;
        }

        .picker-view {
            width: 702rpx;
            height: 600rpx;
            margin: 0 auto;
        }
        .item.select {
            color: #fff;
            font-size: 36rpx;
            font-weight: 600;
        }
        .item {
            height: 50px;
            line-height: 50px;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #999999;
        }
        .picker-view /deep/.uni-picker-view-mask,
        .picker-view .uni-picker-view-mask {
            background: transparent;
        }

        .picker-view /deep/.uni-picker-view-indicator {
            border-top: 2rpx solid #ccc;
            border-bottom: 2rpx solid #ccc;
        }
    }
}
</style>
